<template>
  <div class="procure-dashboard">
    <!-- 页面标题 -->
    <div class="dashboard-header">
      <h1>采购管理</h1>
      <p class="subtitle">管理供应商、采购订单、审核流程等采购相关业务</p>
    </div>

    <!-- 统计概览 -->
    <div class="stats-grid">
      <div class="stat-card">
        <div class="stat-icon suppliers-icon">🏢</div>
        <div class="stat-content">
          <h3>供应商总数</h3>
          <p class="stat-value">{{ formatNumber(dashboardData.totalSuppliers) }}</p>
          <p class="stat-subtitle">活跃供应商</p>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon orders-icon">📦</div>
        <div class="stat-content">
          <h3>采购订单</h3>
          <p class="stat-value">{{ formatNumber(dashboardData.totalOrders) }}</p>
          <p class="stat-subtitle">本月新增</p>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon pending-icon">⏳</div>
        <div class="stat-content">
          <h3>待审核</h3>
          <p class="stat-value">{{ formatNumber(dashboardData.pendingAudit) }}</p>
          <p class="stat-subtitle">待处理订单</p>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon amount-icon">💰</div>
        <div class="stat-content">
          <h3>采购金额</h3>
          <p class="stat-value">¥{{ formatNumber(dashboardData.totalAmount) }}</p>
          <p class="stat-subtitle">本月采购总额</p>
        </div>
      </div>
    </div>

    <!-- 快捷操作 -->
    <div class="quick-actions">
      <h2>快捷操作</h2>
      <div class="action-buttons">
        <button class="action-btn" @click="router.push('/procure/suppliers')">
          <span class="btn-icon">🏢</span>
          供应商管理
        </button>
        <button class="action-btn" @click="router.push('/procure/purchase')">
          <span class="btn-icon">📦</span>
          采购订单管理
        </button>
        <button class="action-btn" @click="router.push('/procure/audit')">
          <span class="btn-icon">✅</span>
          采购审核管理
        </button>
        <button class="action-btn" @click="router.push('/procure/return-order')">
          <span class="btn-icon">↩️</span>
          采购退货管理
        </button>
        <button class="action-btn" @click="router.push('/procure/return-audit')">
          <span class="btn-icon">🔍</span>
          退货审核管理
        </button>
        <button class="action-btn" @click="router.push('/procure/purchase-detail')">
          <span class="btn-icon">📋</span>
          采购明细
        </button>
        <button class="action-btn" @click="router.push('/procure/return-detail')">
          <span class="btn-icon">📄</span>
          采购退货明细
        </button>
        <button class="action-btn" @click="router.push('/procure/statistics')">
          <span class="btn-icon">📊</span>
          商品采购统计
        </button>
      </div>
    </div>

    <!-- 最近活动 -->
    <div class="recent-activities">
      <h2>最近活动</h2>
      <div class="activity-list">
        <div class="activity-item" v-for="activity in recentActivities" :key="activity.id">
          <div class="activity-icon" :class="activity.type">{{ activity.icon }}</div>
          <div class="activity-content">
            <h4>{{ activity.title }}</h4>
            <p>{{ activity.description }}</p>
            <span class="activity-time">{{ activity.time }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { apiGet } from '../../utils/api.js'

const router = useRouter()

// 仪表板数据
const dashboardData = ref({
  totalSuppliers: 0,
  totalOrders: 0,
  pendingAudit: 0,
  totalAmount: 0
})

// 最近活动数据
const recentActivities = ref([])

// 加载仪表板数据
async function loadDashboardData() {
  try {
    const res = await apiGet('/procure/dashboard')
    const payload = (res && typeof res === 'object' && 'data' in res && res.data) ? res.data : res
    if (payload && typeof payload === 'object') {
      dashboardData.value = {
        totalSuppliers: Number(payload.totalSuppliers) || 0,
        totalOrders: Number(payload.totalOrders) || 0,
        pendingAudit: Number(payload.pendingAudit) || 0,
        totalAmount: Number(payload.totalAmount) || 0
      }
    }
  } catch (error) {
    console.error('加载仪表板数据失败:', error)
    // 使用默认数据
    dashboardData.value = {
      totalSuppliers: 156,
      totalOrders: 89,
      pendingAudit: 12,
      totalAmount: 1250000
    }
  }
}

// 加载最近活动
async function loadRecentActivities() {
  try {
    const res = await apiGet('/procure/recent-activities')
    const payload = (res && typeof res === 'object' && 'data' in res && res.data) ? res.data : res
    if (Array.isArray(payload)) {
      recentActivities.value = payload
    }
  } catch (error) {
    console.error('加载最近活动失败:', error)
    // 使用默认数据
    recentActivities.value = [
      {
        id: 1,
        type: 'order',
        icon: '📦',
        title: '新建采购订单',
        description: '订单号: PO202501001，供应商: 北京科技有限公司',
        time: '2小时前'
      },
      {
        id: 2,
        type: 'audit',
        icon: '✅',
        title: '审核通过',
        description: '采购订单 PO202501000 已审核通过',
        time: '4小时前'
      },
      {
        id: 3,
        type: 'supplier',
        icon: '🏢',
        title: '新增供应商',
        description: '上海贸易有限公司 已添加到供应商列表',
        time: '1天前'
      },
      {
        id: 4,
        type: 'return',
        icon: '↩️',
        title: '退货申请',
        description: '订单 PO202500999 申请退货，金额: ¥15,000',
        time: '2天前'
      }
    ]
  }
}

// 格式化数字
function formatNumber(num) {
  if (num >= 1000000) {
    return (num / 1000000).toFixed(1) + 'M'
  } else if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'K'
  }
  return num.toString()
}

// 页面加载时获取数据
onMounted(() => {
  loadDashboardData()
  loadRecentActivities()
})
</script>

<style scoped>
.procure-dashboard {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.dashboard-header {
  text-align: center;
  margin-bottom: 30px;
}

.dashboard-header h1 {
  color: #1f2937;
  margin-bottom: 8px;
  font-size: 32px;
  font-weight: 700;
}

.subtitle {
  color: #6b7280;
  font-size: 16px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.suppliers-icon {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.orders-icon {
  background: linear-gradient(135deg, #10b981, #059669);
}

.pending-icon {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.amount-icon {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.stat-content {
  flex: 1;
}

.stat-content h3 {
  margin: 0 0 8px 0;
  color: #374151;
  font-size: 16px;
  font-weight: 500;
}

.stat-value {
  margin: 0 0 4px 0;
  color: #1f2937;
  font-size: 28px;
  font-weight: 700;
}

.stat-subtitle {
  margin: 0;
  color: #6b7280;
  font-size: 14px;
}

/* 快捷操作 */
.quick-actions {
  margin-bottom: 40px;
}

.quick-actions h2 {
  color: #1f2937;
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 600;
}

.action-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.action-btn {
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  font-size: 16px;
  font-weight: 500;
  color: #374151;
}

.action-btn:hover {
  border-color: #3b82f6;
  background: #f8fafc;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.btn-icon {
  font-size: 20px;
  width: 24px;
  text-align: center;
}

/* 最近活动 */
.recent-activities h2 {
  color: #1f2937;
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 600;
}

.activity-list {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #f3f4f6;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.activity-icon.order {
  background: linear-gradient(135deg, #10b981, #059669);
}

.activity-icon.audit {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.activity-icon.supplier {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.activity-icon.return {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.activity-content {
  flex: 1;
}

.activity-content h4 {
  margin: 0 0 4px 0;
  color: #1f2937;
  font-size: 16px;
  font-weight: 600;
}

.activity-content p {
  margin: 0 0 8px 0;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.4;
}

.activity-time {
  color: #9ca3af;
  font-size: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .procure-dashboard {
    padding: 16px;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .action-buttons {
    grid-template-columns: 1fr;
  }
  
  .dashboard-header h1 {
    font-size: 24px;
  }
}

/* 深色模式支持 */
.dark-mode .procure-dashboard {
  background: #0f172a;
}

.dark-mode .stat-card,
.dark-mode .activity-list {
  background: #1e293b;
  border-color: #334155;
}

.dark-mode .dashboard-header h1,
.dark-mode .quick-actions h2,
.dark-mode .recent-activities h2 {
  color: #e2e8f0;
}

.dark-mode .subtitle {
  color: #94a3b8;
}

.dark-mode .stat-content h3,
.dark-mode .activity-content h4 {
  color: #e2e8f0;
}

.dark-mode .stat-value {
  color: #f1f5f9;
}

.dark-mode .stat-subtitle,
.dark-mode .activity-content p {
  color: #94a3b8;
}

.dark-mode .action-btn {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}

.dark-mode .action-btn:hover {
  background: #334155;
  border-color: #3b82f6;
}

.dark-mode .activity-item {
  border-bottom-color: #334155;
}

.dark-mode .activity-time {
  color: #64748b;
}
</style>